<template>
  <div id="global-header">
    <a-row :wrap="false">
      <a-col :xs="8" :sm="4">
        <h1 class="logo" @click="router.push('/')">触图万象</h1>
      </a-col>
      <a-col :xs="0" :sm="2">
        <a-tag color="blue" v-if="userStore.userInfo.id">日活量: {{ countOnline }}</a-tag>
      </a-col>
      <a-col flex="auto">
        <a-menu
          @click="toggleMenu"
          v-model:selectedKeys="current"
          mode="horizontal"
          :items="items"
        />
      </a-col>
      <a-col>
        <a-row justify="space-around" :wrap="false" gutter="16">
          <a-col v-if="userStore.userInfo.id" :xs="0" :sm="8">
            <a-button @click="doSign" v-if="!isSign" danger>签到</a-button>

            <a-tooltip title="已签到" v-else>
              <a-button @click="doSign" type="primary" :icon="h(SignalFilled)"
                >{{ signCount }}天</a-button
              >
            </a-tooltip>
          </a-col>
          <a-col v-if="userStore.userInfo.id">
            <a-dropdown>
              <a-space>
                <a-avatar
                  size="large"
                  :src="
                    userStore.userInfo.userAvatar ??
                    'https://luqi-1329071127.cos.ap-chengdu.myqcloud.com/public/1896406639237787649/2025-03-16_16H1lNOZxd21DzWB.jpg'
                  "
                />
                <span>{{ userStore.userInfo.userName }}</span>
              </a-space>
              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <RouterLink to="/space/my">
                      <UserOutlined />
                      我的空间
                    </RouterLink>
                  </a-menu-item>
                  <a-menu-item>
                    <a :href="`/user/detail/${userStore?.userInfo?.id}`">
                      <UserOutlined />
                      个人详情</a
                    >
                  </a-menu-item>
                  <a-menu-item @click="goLogout">
                    <a-space>
                      <LoginOutlined />
                      <a> 退出登录</a>
                    </a-space>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </a-col>

          <a-col v-else>
            <a-button type="primary" @click="router.push('/user/login')">登录</a-button>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
import { computed, h, onMounted, ref } from 'vue'
import type { MenuProps } from 'ant-design-vue'
import {
  EditOutlined,
  HomeOutlined,
  LoginOutlined,
  PhoneOutlined,
  QuestionCircleOutlined,
  RobotFilled,
  SignalFilled,
  UserOutlined,
} from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user.ts'
import { countSignUsingGet, isSignUsingGet, signUsingPost } from '@/api/userController.ts'
import { countSpaceVisitUsingGet } from '@/api/spaceController.ts'

const userStore = useUserStore()

const originMenu = ref<MenuProps['items']>([
  {
    key: '/',
    icon: () => h(HomeOutlined),
    label: '主页',
    title: '主页',
  },
  {
    key: '/about',
    icon: () => h(QuestionCircleOutlined),
    label: '关于',
    title: '关于',
  },
  {
    key: '/admin/picture-manage',
    icon: () => h(EditOutlined),
    label: '图片管理',
    title: '图片管理',
  },
  {
    key: '/admin/user-manage',
    icon: () => h(UserOutlined),
    label: '用户管理',
    title: '用户管理',
  },
  {
    key: '/admin/space-manage',
    icon: () => h(EditOutlined),
    label: '空间管理',
    title: '空间管理',
  },
  {
    key: '/',
    icon: () => h(RobotFilled),
    label: 'AI',
    title: 'AI',
    children: [
      {
        key: '/picture/ai/painting',
        icon: () => h(RobotFilled),
        label: 'AI扩图',
        title: 'AI扩图',
      },
    ],
  },
  {
    key: '/contact',
    icon: () => h(PhoneOutlined),
    label: '联系我们',
    title: '联系',
  },
])

const router = useRouter()
// 切换菜单
const toggleMenu = ({ key }) => {
  console.log(key)
  router.push({
    path: key,
  })
}

// 过滤菜单
const filterMenu = (menus) => {
  return menus.filter((item) => {
    // 不是管理员过滤掉/admin路径
    if (item.key.startsWith('/admin')) {
      if (!userStore.userInfo || userStore.userInfo?.userRole !== 'admin') {
        return false
      }
    }
    return true
  })
}
const items = computed(() => filterMenu(originMenu.value))

const current = ref<string[]>([''])
// 路由切换
router.afterEach((to) => {
  current.value = [to.path]
})

// 点击签到
const isSign = ref<boolean>(false)
const doSign = async () => {
  const res = await signUsingPost()
  if (res.data.code === 0 && res.data.data) {
    isSign.value = true
  }
  await querySignCount()
}

const querySign = async () => {
  const res = await isSignUsingGet()
  if (res.data.code === 0 && res.data.data) {
    isSign.value = res.data.data
  }
}

// 查询连续签到次数
const signCount = ref<number>(0)
const querySignCount = async () => {
  const res = await countSignUsingGet()
  if (res.data.code === 0 && res.data.data) {
    signCount.value = res.data.data
  }
}

// 退出登录
const goLogout = async () => {
  await userStore.removeUserInfo()
  router.push('/user/login')
}

// 统计日活量
const countOnline = ref<number>(0)
const getCountOnline = async () => {
  const res = await countSpaceVisitUsingGet()
  if (res.data.code === 0 && res.data.data) {
    countOnline.value = res.data.data
  }
}

onMounted(() => {
  querySign()
  querySignCount()
  getCountOnline()
})
</script>

<style scoped lang="scss">
#global-header {
  padding: 0 24px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;

  .ant-row {
    height: 64px;
    align-items: center;
  }

  .logo {
    width: 120px;
    height: 40px;
    background-image: url('../assets/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px;
    cursor: pointer;
    transition: transform 0.3s ease;

    &:hover {
      transform: scale(1.05);
    }
  }

  .ant-menu {
    border-bottom: none;
    line-height: 64px;
  }

  .ant-avatar {
    transition: transform 0.3s ease;
    &:hover {
      transform: scale(1.1);
    }
  }

  .ant-btn {
    transition: all 0.3s ease;
    &:hover {
      transform: translateY(-2px);
    }
  }

  .ant-tag {
    margin-right: 8px;
    padding: 4px 8px;
    border-radius: 4px;
  }

  @media screen and (max-width: 576px) {
    padding: 0 12px;

    .logo {
      width: 100px;
      height: 32px;
    }

    .ant-row {
      height: 48px;
    }

    .ant-menu {
      line-height: 48px;
    }
  }
}
</style>
